<template>
  <basic-container :btnFlag=true>
    <div class="card-border">
      <card-header :header-data="headerData"></card-header>
      <div style="margin-left: 9px;margin-top: -38px;">
        <bostech-detail :detail-data="detailData1"></bostech-detail>
      </div>
      <div style="float: right;margin-right: 30px">
        <el-button type="primary" size="mini" @click="clickChooseDept">选择课题责任单位</el-button>
      </div>
      <span style="font-weight: 600;margin-left: 10px">课题责任单位：</span>
      <div class="card-body">
        <bostech-detail :detail-data="deptOpinionData"></bostech-detail>
      </div>
      <div style="float: right;margin-right: 30px;">
        <el-button type="primary  " size="mini" @click="taskAssign()">成果录入</el-button>
      </div>
      <span style="font-weight: 600;margin-left: 10px">成果列表：</span>
      <div class="card-body">
        <avue-crud :data="materialData"
                   :option="materialoption"
                   :page="page"
                   :table-loading="tableLoading"
                   @on-load="getResultList"
                   @refresh-change="refreshChange"
                   @search-change="searchChange"
                   class="avuecrud">
          <template slot-scope="scope" slot="menu">
            <div class="menu-title" @click.stop="materialSummary(scope.row,scope.index)">
              <i class="iconfont iconview icon-primary"></i>
              <p class="menu-title-text">成果详情</p>
            </div>
          </template>
        </avue-crud>
      </div>
      <div style="margin-top: 23px;margin-left: -15px;">
        <el-form
          label-width="130px"
          :model="subjectForm1"
          style="padding-right: 30px;"
          :rules="subjectInfosrules1"
          ref="subjectForm1"
        >
          <el-row>
            <el-col :span="22">
              <el-form-item class="form-item" style="font-weight: 600" label="专家意见 :" prop="description">
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 4, maxRows: 4}"
                  placeholder="请输入专家意见"
                  v-model="subjectForm1.description"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="form-submit">
        <el-button type="primary">保存</el-button>
        <el-button type="info">关闭</el-button>
      </div>
      <xieorg-tree :orgCodeVisiblesubmit="chooseDeptCodeVisiblesubmit" @orgCodeClick="chooseDeptCodeClick"
                   @orgCodeHandleClosesubmit="chooseDeptCodeHandleClosesubmit"
                   @orgCodeCheckChange="chooseDeptCodeCheckChange"></xieorg-tree>
      <xieorg-tree :orgCodeVisiblesubmit="editDeptCodeVisiblesubmit" @orgCodeClick="editDeptCodeClick"
                   @orgCodeHandleClosesubmit="editDeptCodeHandleClosesubmit"
                   @orgCodeCheckChange="editDeptCodeCheckChange"></xieorg-tree>
    </div>
  </basic-container>
</template>

<script>
  import {getSubjectInfo, getDutyDept, addDutyDept} from "@/api/subject";

  export default {
    name: "subjectProtocol",
    created() {
      this.putSubjectInfo();
      this.putDepts();
      this.deptOpinionData = [{label: '责任单位', value: '水利厅'},];
      this.subjectListData = [{title: '课题1', time: '2019.01', dept: '水利厅'},
        {title: '课题2', time: '2019.02', dept: '环保厅'}]
    },
    data() {
      return {
        subjectForm1: {},
        headerData: {
          title: '课题编制'
        },
        subjectListData: [],
        materialData: [],
        deptOpinionoption: {
          page: true,
          menuWidth: 230,
          addBtn: false,
          editBtn: false,
          addRowBtn: false,
          indexLabel: "序号",
          index: true,
          indexWidth:70,
          cellBtn: false,
          delBtn: false,
          columnBtn: false,
          refreshBtn: false,
          filterBtn: false,
          searchBtn: false,
          keyId: "id",
          column: [
            {
              label: "责任单位",
              width: 200,
              prop: "dept",
              cell: true
            },
            {
              label: "反馈人",
              width: 200,
              prop: "time",
              cell: true
            },
            {
              label: "反馈时间",
              width: 200,
              prop: "time",
              cell: true
            },
          ]
        },
        materialoption: {
          page: true,
          menuWidth: 130,
          addBtn: false,
          editBtn: false,
          addRowBtn: false,
          indexLabel: "序号",
          index: true,
          indexWidth:70,
          cellBtn: false,
          delBtn: false,
          columnBtn: false,
          refreshBtn: false,
          filterBtn: false,
          searchBtn: false,
          keyId: "id",
          column: [
            {
              label: "成果名称",
              width: 200,
              prop: "dept",
              cell: true
            },
            {
              label: "成果描述",
              width: 400,
              prop: "demand",
              cell: true
            },
            {
              label: "创建时间",
              width: 200,
              prop: "time",
              cell: true
            },
          ]
        },
        detailData1: [],
        projectForm: {
          supportDeptName: '',
          deptIds: [],
        },
        chooseDeptCodeVisiblesubmit: false,
        subjectDept: {
          deptIds: [],
          subjectId: 0,
        }
      }
    },
    methods: {
      // 弹出选择责任部门弹框
      clickChooseDept() {
        this.chooseDeptCodeVisiblesubmit = true
      },
      chooseDeptCodeClick() {
      },
      chooseDeptCodeHandleClosesubmit() {
        this.chooseDeptCodeVisiblesubmit = false
      },
      chooseDeptCodeCheckChange(data) {
        this.projectForm.supportDeptName = '';
        this.projectForm.deptIds = [];
        for (var i in data) {
          this.projectForm.supportDeptName += data[i].name + ',';
          this.projectForm.deptIds.push(data[i].id);
        }
        this.deptOpinionData = [{label: '责任单位', value: this.projectForm.supportDeptName},];

        this.subjectDept.deptIds = this.projectForm.deptIds;
        this.subjectDept.subjectId = this.$route.params.id;

        addDutyDept(this.subjectDept).then(response => {
        });
      },

      // 弹出修改责任部门弹框
      clickEditDept() {
        this.editDeptCodeVisiblesubmit = true
      },
      editDeptCodeClick() {
      },
      editDeptCodeHandleClosesubmit() {
        this.editDeptCodeVisiblesubmit = false
      },
      editDeptCodeCheckChange(data) {
        this.projectForm.supportDeptName = '';
        this.projectForm.deptIds = [];
        for (var i in data) {
          this.projectForm.supportDeptName += data[i].name + ',';
          this.projectForm.deptIds.push(data[i].id);
        }
      },
      // 课题编辑跳转
      subjectEdit(row, index) {
        let src = `/subjectEdit/detail`;
        this.$router.push({
          path: src
        })
      },
      // 课题征集任务分配跳转
      taskAssign(row, index) {
        let src = `/taskAssign/detail`;
        this.$router.push({
          path: src
        })
      },
      putSubjectInfo() {
        getSubjectInfo(this.$route.params.id).then(response => {
          this.detailData1 = [{label: '课题名称', value: response.data.data.title},
            {label: '课题概述', value: response.data.data.description}];
        })
      },
      putDepts() {
        getDutyDept(Object.assign({
            subjectId: this.$route.params.id,
          }
        )).then(response => {
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
  .card-body {
    padding: 10px;
  }

  .form-submit {
    text-align: center;
    margin-bottom: 24px;
  }
</style>
